<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="add">添加</button>
    <table border="1" cellsapceing="20" cellpadding="20">
        <tbody>
            <tr>
                <th>id</th>
                <th>name</th>
                <th>age</th>
                <th>操作</th>
            </tr>
        </tbody>
    </table>

    <script>
        let info = [{
            name: "胡杭",
            age: 16,
        }, {
            name: "胜明",
            age: 22,
        }, {
            name: "军毅",
            age: 21,
        }, {
            name: "晓华",
            age: 13,
        }, {
            name: "盛聪",
            age: 23,
        }, {
            name: "侦剑",
            age: 32,
        }, {
            name: "红翔",
            age: 25,
        }, {
            name: "超维",
            age: 18,
        }, {
            name: "士琪",
            age: 22,
        }, {
            name: "艳华",
            age: 20,
        }, ];

        let adds = document.querySelector('.add');
        let tbody = document.querySelector('tbody');
        let btns = document.querySelectorAll('.button');
        let index = 0;

        function add() {
            if (tbody.children.length <= info.length) {
                let newTr = document.createElement('tr');
                newTr.innerHTML = `<td>${index}</td>
                               <td>${info[index].name}</td>
                               <td>${info[index].age}</td>
                               <td><button>删除</button></td>`

                tbody.appendChild(newTr);
                index++;
            } else {
                index = 0;
            }
            // if (index == info.length) {
            //     adds.disabled = true;
            // }
        }
        adds.addEventListener('click', add);

        function del(e) {
            if (e.target.tagName == 'BUTTON') {
                e.target.parentNode.parentNode.remove();
            }

        }
        tbody.addEventListener('click', del);
    </script>
</body>

</html>